<template>
    <div class="travelogue-manage-container">
      <!-- 搜索和操作区域 -->
      <div class="operation-area">
        <el-card shadow="hover">
          <div class="search-wrapper">
            <el-input
                v-model="searchQuery"
                placeholder="输入游记标题或作者名搜索"
                clearable
                class="search-input"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
  
            <el-select v-model="statusFilter" placeholder="游记状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="已发布" :value="1" />
              <el-option label="已下架" :value="-1" />
            </el-select>
  
            <el-select v-model="featuredFilter" placeholder="是否精选" clearable>
              <el-option label="全部" value="" />
              <el-option label="精选" :value="true" />
              <el-option label="非精选" :value="false" />
            </el-select>
            <el-select v-model="cityFilter" placeholder="所属城市" clearable>
  <el-option label="全部" value="" />
  <el-option label="石家庄" :value="1" />
  <el-option label="唐山" :value="2" />
  <el-option label="北京" :value="3" />
  <el-option label="上海" :value="4" />
</el-select>

<el-select v-model="tagFilter" placeholder="游记标签" clearable>
  <el-option label="全部" value="" />
  <el-option v-for="tag in tagOptions" :key="tag" :label="tag" :value="tag" />
</el-select>
  
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>搜索
            </el-button>
  
            <el-button type="success" @click="handleAddTravelogue">
              <el-icon><Plus /></el-icon>新增游记
            </el-button>
          </div>
        </el-card>
      </div>
  
      <!-- 游记表格 -->
      <el-card shadow="hover" class="table-card">
        <el-table
            :data="filteredTravelogueList"
            stripe
            style="width: 100%"
            v-loading="loading"
        >
          <el-table-column type="index" width="50" label="序号" />
  
          <el-table-column label="封面图" width="100">
            <template #default="scope">
              <el-image
                  style="width: 80px; height: 60px"
                  :src="scope.row.travelogue.imagePath || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                  fit="cover"
                  :preview-src-list="[scope.row.travelogue.imagePath]"
              />
            </template>
          </el-table-column>
  
          <el-table-column prop="travelogue.title" label="游记标题" width="180" />
  
          <el-table-column prop="userName" label="作者" width="120" />
  
          <el-table-column prop="cityName" label="城市" width="120" />
  
          <el-table-column prop="travelogue.viewCount" label="浏览量" width="100" sortable />
  
          <el-table-column prop="travelogue.likeCount" label="点赞数" width="100" sortable />
  
          <el-table-column prop="travelogue.commentCount" label="评论数" width="100" sortable />
  
          <el-table-column label="游记标签" width="200">
            <template #default="scope">
              <el-tag 
                 v-for="tag in scope.row.travelogue.tags" 
                 :key="tag" 
                 size="small" 
                 class="tag-item"
              >
                {{ tag }}
              </el-tag>
            </template>
          </el-table-column>
  
          <el-table-column label="精选" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.travelogue.isFeatured ? 'success' : 'info'">
                {{ scope.row.travelogue.isFeatured ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
  
          <el-table-column label="编辑精选" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.travelogue.isEditor ? 'success' : 'info'">
                {{ scope.row.travelogue.isEditor ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
  
          <el-table-column prop="travelogue.status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getTravelogueStatusType(scope.row.travelogue.status)">
                {{ getTravelogueStatusText(scope.row.travelogue.status) }}
              </el-tag>
            </template>
          </el-table-column>
  
          <el-table-column prop="travelogue.createTime" label="创建时间" width="180" />
  
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="scope">
              <el-button
                  size="small"
                  @click="handleViewTravelogue(scope.row)"
                  type="primary"
                  link
              >
                查看
              </el-button>
  
              <el-button
                  size="small"
                  @click="handleEditTravelogue(scope.row)"
                  type="primary"
                  link
              >
                编辑
              </el-button>
  
              <el-button
                  size="small"
                  @click="handleDeleteTravelogue(scope.row)"
                  type="danger"
                  link
              >
                删除
              </el-button>
  
              <el-button
                  size="small"
                  @click="handleSetFeatured(scope.row, true)"
                  type="success"
                  link
                  v-if="!scope.row.travelogue.isFeatured"
              >
                设为精选
              </el-button>
  
              <el-button
                  size="small"
                  @click="handleSetFeatured(scope.row, false)"
                  type="warning"
                  link
                  v-if="scope.row.travelogue.isFeatured"
              >
                取消精选
              </el-button>
  
              <el-button
                  size="small"
                  @click="handleChangeStatus(scope.row)"
                  :type="scope.row.travelogue.status === 1 ? 'warning' : 'success'"
                  link
              >
                {{ scope.row.travelogue.status === 1 ? '下架' : '上架' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalTravelogues"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
  
      <!-- 游记详情对话框 -->
      <el-dialog
          v-model="dialogVisible"
          :title="dialogType === 'add' ? '新增游记' : dialogType === 'edit' ? '编辑游记' : '游记详情'"
          width="800px"
      >
        <el-form
            ref="travelogueFormRef"
            :model="travelogueForm"
            :rules="travelogueFormRules"
            label-width="100px"
            :disabled="dialogType === 'view'"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="游记标题" prop="title">
                <el-input v-model="travelogueForm.title" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属城市" prop="cityId">
                <el-select v-model="travelogueForm.cityId" placeholder="请选择城市">
                  <el-option label="石家庄" :value="1" />
                  <el-option label="唐山" :value="2" />
                  <el-option label="北京" :value="3" />
                  <el-option label="上海" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="简短描述" prop="easyText">
                <el-input 
                  v-model="travelogueForm.easyText" 
                  type="textarea" 
                  rows="3"
                  placeholder="请输入游记简短描述，不超过200字" 
                />
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="游记标签" prop="tags">
                <el-select
                  v-model="travelogueForm.tags"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择或创建标签"
                >
                  <el-option
                    v-for="tag in tagOptions"
                    :key="tag"
                    :label="tag"
                    :value="tag"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="是否精选" prop="isFeatured">
                <el-switch v-model="travelogueForm.isFeatured" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="编辑精选" prop="isEditor">
                <el-switch v-model="travelogueForm.isEditor" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-select v-model="travelogueForm.status" placeholder="请选择状态">
                  <el-option label="已发布" :value="1" />
                  <el-option label="已下架" :value="-1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-form-item label="封面图" prop="imagePath">
            <el-upload
                class="cover-uploader"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleCoverSuccess"
                :before-upload="beforeCoverUpload"
            >
              <img v-if="travelogueForm.imagePath" :src="travelogueForm.imagePath" class="cover" />
              <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip">建议上传16:9比例图片，尺寸不小于1280x720</div>
          </el-form-item>
  
          <el-form-item label="游记内容" prop="content" v-if="dialogType !== 'view'">
            <el-input v-model="travelogueForm.content" type="textarea" rows="6" placeholder="游记内容为JSON格式，请谨慎修改" />
          </el-form-item>
  
          <el-form-item label="游记内容" v-if="dialogType === 'view'">
            <div class="content-preview">
              <div v-for="(section, index) in parsedContent" :key="index" class="content-section">
                <h3>{{ section.title }}</h3>
                <div v-for="(item, itemIndex) in section.content" :key="itemIndex">
                  <p v-if="item.type === 'text'">{{ item.content }}</p>
                  <blockquote v-if="item.type === 'quote'">
                    <p>{{ item.content }}</p>
                    <footer v-if="item.author">— {{ item.author }}</footer>
                  </blockquote>
                  <h4 v-if="item.type === 'subtitle'">{{ item.content }}</h4>
                  <div v-if="item.type === 'tip'" class="tip-box">
                    <i class="el-icon-info"></i> {{ item.content }}
                  </div>
                  <img 
                    v-if="item.type === 'image'" 
                    :src="item.url" 
                    :alt="item.caption || '游记图片'"
                    class="content-image"
                  />
                  <div v-if="item.type === 'imageGroup'" class="image-group">
                    <div v-for="(img, imgIndex) in item.images" :key="imgIndex" class="group-image-item">
                      <img :src="img.url" :alt="img.caption || '游记图片'" />
                      <div class="image-caption" v-if="img.caption">{{ img.caption }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
  
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button
                type="primary"
                @click="submitTravelogueForm"
                v-if="dialogType !== 'view'"
            >
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 删除确认对话框 -->
      <el-dialog
          v-model="deleteDialogVisible"
          title="确认删除"
          width="400px"
      >
        <div class="delete-confirm">
          <el-icon class="warning-icon"><WarningFilled /></el-icon>
          <span>确定要删除游记 <strong>{{ selectedTravelogue.travelogue?.title }}</strong> 吗？此操作不可恢复！</span>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取消</el-button>
            <el-button type="danger" @click="confirmDelete">确定删除</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { ref, reactive, computed, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Search, Plus, WarningFilled } from '@element-plus/icons-vue'
  import { getAllTravelogue } from "@/api/travelogue"
  import request from "@/utils/request"
  
  export default {
    name: 'TravelogueManagement',
    components: {
      Search,
      Plus,
      WarningFilled
    },
    setup() {
      // 状态和数据
      const loading = ref(false);
      const travelogueList = ref([]);
      const searchQuery = ref('');
      const statusFilter = ref('');
      const featuredFilter = ref('');
      const cityFilter = ref(''); // 添加这行
const tagFilter = ref(''); // 添加这行
      const dialogVisible = ref(false);
      const dialogType = ref('view'); // 'view', 'add', 'edit'
      const deleteDialogVisible = ref(false);
      const selectedTravelogue = ref({});
      const currentPage = ref(1);
      const pageSize = ref(10);
      const totalTravelogues = ref(0);
  
      // 游记表单
      const travelogueFormRef = ref(null);
      const travelogueForm = reactive({
        travelogueId: null,
        title: '',
        content: '',
        cityId: 1,
        authorId: 1, // 假设当前用户ID为1
        easyText: '',
        imagePath: '',
        tags: [],
        isFeatured: false,
        isEditor: false,
        status: 1
      });
  
      // 标签选项
      const tagOptions = [
        '自然风光', '历史遗迹', '美食探索', '城市探索', '徒步旅行',
        '摄影之旅', '背包客', '古镇探秘', '高山徒步', '海岛游',
        '极限运动', '滑雪度假', '海滩度假', '文化旅游', '购物天堂',
        '亲子游', '自驾游', '温泉度假', '蜜月旅行', '生态旅游',
        '公路旅行', '宗教朝圣', '博物馆之旅', '节日庆典', '家庭度假',
        '浪漫假期', '奢华度假', '徒步露营'
      ];
  
      // 表单验证规则
      const travelogueFormRules = reactive({
        title: [
          { required: true, message: '请输入游记标题', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在2到50个字符之间', trigger: 'blur' }
        ],
        cityId: [
          { required: true, message: '请选择所属城市', trigger: 'change' }
        ],
        easyText: [
          { required: true, message: '请输入游记简短描述', trigger: 'blur' },
          { max: 200, message: '简短描述不超过200字', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请至少选择一个标签', trigger: 'change' },
          { 
            validator: (rule, value, callback) => {
              if (value && value.length > 5) {
                callback(new Error('标签最多选择5个'));
              } else {
                callback();
              }
            }, 
            trigger: 'change' 
          }
        ],
        status: [
          { required: true, message: '请选择游记状态', trigger: 'change' }
        ]
      });
  
      // 解析游记内容为可显示的格式
      const parsedContent = computed(() => {
        if (!travelogueForm.content) return [];
        try {
          return JSON.parse(travelogueForm.content);
        } catch (e) {
          console.error('解析游记内容出错:', e);
          return [];
        }
      });
  
      // 根据过滤条件筛选游记
      // 根据过滤条件筛选游记
const filteredTravelogueList = computed(() => {
  if (!travelogueList.value) return [];

  return travelogueList.value.filter(travelogue => {
    const matchQuery = searchQuery.value
        ? (travelogue.travelogue.title && travelogue.travelogue.title.includes(searchQuery.value)) ||
          (travelogue.userName && travelogue.userName.includes(searchQuery.value))
        : true;

    const matchStatus = statusFilter.value !== ''
        ? travelogue.travelogue.status === parseInt(statusFilter.value)
        : true;

    const matchFeatured = featuredFilter.value !== ''
        ? travelogue.travelogue.isFeatured === (featuredFilter.value === 'true')
        : true;
        
    const matchCity = cityFilter.value !== ''
        ? travelogue.travelogue.cityId === parseInt(cityFilter.value)
        : true;
        
    const matchTag = tagFilter.value !== ''
        ? travelogue.travelogue.tags && travelogue.travelogue.tags.includes(tagFilter.value)
        : true;

    return matchQuery && matchStatus && matchFeatured && matchCity && matchTag;
  });
});
      // 获取游记状态对应的文本
      const getTravelogueStatusText = (status) => {
        switch (status) {
          case 1: return '已发布';
          case -1: return '已下架';
          default: return '未知';
        }
      };
  
      // 获取游记状态对应的标签类型
      const getTravelogueStatusType = (status) => {
        switch (status) {
          case 1: return 'success';
          case -1: return 'danger';
          default: return 'info';
        }
      };
  
      // 获取游记列表
      const fetchTravelogueList = () => {
        loading.value = true;
        getAllTravelogue(100).then(response => {
          if (response.state === 0 && response.data) {
            travelogueList.value = response.data;
            totalTravelogues.value = response.data.length;
          } else {
            ElMessage.error(response.message || '获取游记列表失败');
          }
        }).catch(error => {
          console.error('获取游记列表出错:', error);
          ElMessage.error('获取游记列表失败');
        }).finally(() => {
          loading.value = false;
        });
      };
  
      // 搜索游记
      const handleSearch = () => {
        currentPage.value = 1;
        setTimeout(() => {
    // 这里不需要额外代码，只是通过setTimeout将操作推迟到下一个事件循环
  }, 0);
        // 实际项目中可能需要调用接口进行搜索，这里只是前端过滤
      };
  
      // 变更每页显示数量
      const handleSizeChange = (val) => {
        pageSize.value = val;
        // 如果是服务端分页，这里需要重新请求数据
      };
  
      // 变更当前页码
      const handleCurrentChange = (val) => {
        currentPage.value = val;
        // 如果是服务端分页，这里需要重新请求数据
      };
  
      // 查看游记
      const handleViewTravelogue = (row) => {
        selectedTravelogue.value = row;
        Object.assign(travelogueForm, row.travelogue);
        dialogType.value = 'view';
        dialogVisible.value = true;
      };
  
      // 编辑游记
      const handleEditTravelogue = (row) => {
        selectedTravelogue.value = row;
        Object.assign(travelogueForm, JSON.parse(JSON.stringify(row.travelogue)));
        dialogType.value = 'edit';
        dialogVisible.value = true;
      };
  
      // 添加游记
      const handleAddTravelogue = () => {
        Object.keys(travelogueForm).forEach(key => {
          if (key === 'status') {
            travelogueForm[key] = 1;
          } else if (key === 'isFeatured' || key === 'isEditor') {
            travelogueForm[key] = false;
          } else if (key === 'tags') {
            travelogueForm[key] = [];
          } else if (key === 'authorId') {
            travelogueForm[key] = 1; // 假设当前用户ID为1
          } else if (key === 'cityId') {
            travelogueForm[key] = 1;
          } else {
            travelogueForm[key] = '';
          }
        });
        
        // 初始化一个空的游记内容结构
        travelogueForm.content = JSON.stringify([
          {
            title: '前言',
            content: [
              {
                type: 'text',
                content: '请在这里填写游记前言内容'
              }
            ]
          }
        ]);
        
        dialogType.value = 'add';
        dialogVisible.value = true;
      };
  
      // 删除游记
      const handleDeleteTravelogue = (row) => {
        selectedTravelogue.value = row;
        deleteDialogVisible.value = true;
      };
  
      // 确认删除
      const confirmDelete = () => {
        loading.value = true;
        
        request({
          url: `/api/travelogue/deleteTravelogue/${selectedTravelogue.value.travelogue.travelogueId}`,
          method: 'delete'
        }).then(response => {
          if (response.state === 0) {
            ElMessage.success('删除成功');
            deleteDialogVisible.value = false;
            // 从列表中移除
            const index = travelogueList.value.findIndex(
              item => item.travelogue.travelogueId === selectedTravelogue.value.travelogue.travelogueId
            );
            if (index !== -1) {
              travelogueList.value.splice(index, 1);
            }
          } else {
            ElMessage.error(response.message || '删除失败');
          }
        }).catch(error => {
          console.error('删除游记出错:', error);
          ElMessage.error('删除失败');
        }).finally(() => {
          loading.value = false;
        });
      };
  
      // 修改游记精选状态
      const handleSetFeatured = (row, featured) => {
        const statusText = featured ? '设为精选' : '取消精选';
        
        request({
          url: `/api/travelogue/setFeatured`,
          method: 'post',
          data: {
            travelogueId: row.travelogue.travelogueId,
            isFeatured: featured
          }
        }).then(response => {
          if (response.state === 0) {
            ElMessage.success(`${statusText}成功`);
            // 更新状态
            row.travelogue.isFeatured = featured;
          } else {
            ElMessage.error(response.message || `${statusText}失败`);
          }
        }).catch(error => {
          console.error(`${statusText}游记出错:`, error);
          ElMessage.error(`${statusText}失败`);
        });
      };
  
      // 修改游记状态
      const handleChangeStatus = (row) => {
        const newStatus = row.travelogue.status === 1 ? -1 : 1;
        const statusText = newStatus === 1 ? '上架' : '下架';
        
        request({
          url: `/api/travelogue/changeStatus`,
          method: 'post',
          data: {
            travelogueId: row.travelogue.travelogueId,
            status: newStatus
          }
        }).then(response => {
          if (response.state === 0) {
            ElMessage.success(`${statusText}成功`);
            // 更新状态
            row.travelogue.status = newStatus;
          } else {
            ElMessage.error(response.message || `${statusText}失败`);
          }
        }).catch(error => {
          console.error(`${statusText}游记出错:`, error);
          ElMessage.error(`${statusText}失败`);
        });
      };
  
      // 提交游记表单
      const submitTravelogueForm = () => {
        if (!travelogueFormRef.value) return;
  
        travelogueFormRef.value.validate((valid) => {
          if (valid) {
            loading.value = true;
            
            const apiUrl = dialogType.value === 'add' 
              ? '/api/travelogue/addTravelogue' 
              : '/api/travelogue/updateTravelogue';
            
            request({
              url: apiUrl,
              method: 'post',
              data: travelogueForm
            }).then(response => {
              if (response.state === 0) {
                ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功');
                dialogVisible.value = false;
  
                // 重新获取游记列表
                fetchTravelogueList();
              } else {
                ElMessage.error(response.message || (dialogType.value === 'add' ? '添加失败' : '更新失败'));
              }
            }).catch(error => {
              console.error(dialogType.value === 'add' ? '添加游记出错:' : '更新游记出错:', error);
              ElMessage.error(dialogType.value === 'add' ? '添加失败' : '更新失败');
            }).finally(() => {
              loading.value = false;
            });
          }
        });
      };
  
      // 封面图上传成功回调
      const handleCoverSuccess = (response) => {
        // 假设上传接口返回的格式是 { state: 0, data: { url: '图片地址' } }
        if (response.state === 0 && response.data) {
          travelogueForm.imagePath = response.data.url;
          ElMessage.success('封面图上传成功');
        } else {
          ElMessage.error('封面图上传失败');
        }
      };
  
      // 封面图上传前的验证
      const beforeCoverUpload = (file) => {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 5;
  
        if (!isJPG && !isPNG) {
          ElMessage.error('封面图只能是JPG或PNG格式!');
          return false;
        }
        if (!isLt2M) {
          ElMessage.error('封面图大小不能超过5MB!');
          return false;
        }
        return true;
      };
  
      // 生命周期钩子
      onMounted(() => {
        fetchTravelogueList();
      });
  
      return {
        loading,
        travelogueList,
        searchQuery,
        statusFilter,
        featuredFilter,
        dialogVisible,
        dialogType,
        deleteDialogVisible,
        selectedTravelogue,
        currentPage,
        pageSize,
        totalTravelogues,
        travelogueFormRef,
        travelogueForm,
        travelogueFormRules,
        tagOptions,
        cityFilter, // 添加这行
  tagFilter, // 添加这行
        filteredTravelogueList,
        parsedContent,
        getTravelogueStatusText,
        getTravelogueStatusType,
        handleSearch,
        handleSizeChange,
        handleCurrentChange,
        handleViewTravelogue,
        handleEditTravelogue,
        handleAddTravelogue,
        handleDeleteTravelogue,
        confirmDelete,
        handleSetFeatured,
        handleChangeStatus,
        submitTravelogueForm,
        handleCoverSuccess,
        beforeCoverUpload
      };
    }
  };
  </script>
  
  <style scoped>
  .travelogue-manage-container {
  padding: 20px;
}

.operation-area {
  margin-bottom: 20px;
}

.search-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.cover-uploader {
  width: 240px;
  height: 135px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.cover-uploader:hover {
  border-color: #409EFF;
}

.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 240px;
  height: 135px;
  line-height: 135px;
  text-align: center;
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

.content-preview {
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
}

.content-section {
  margin-bottom: 20px;
}

.content-section h3 {
  font-size: 18px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.content-image {
  max-width: 100%;
  margin: 10px 0;
  border-radius: 4px;
}

.image-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.group-image-item {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.group-image-item img {
  width: 100%;
  border-radius: 4px;
}

.image-caption {
  font-size: 12px;
  color: #606266;
  text-align: center;
  margin-top: 5px;
}

.tip-box {
  background-color: #e6f7ff;
  border-left: 4px solid #1890ff;
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 0 4px 4px 0;
}

.tag-item {
  margin-right: 5px;
  margin-bottom: 5px;
}

.delete-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
}

.warning-icon {
  font-size: 24px;
  color: #f56c6c;
}

blockquote {
  background: #f5f5f5;
  border-left: 4px solid #ddd;
  margin: 10px 0;
  padding: 10px 15px;
  color: #666;
}

blockquote footer {
  text-align: right;
  font-style: italic;
  margin-top: 5px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .search-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-input {
    width: 100%;
  }
  
  .el-select {
    width: 100%;
  }
  
  .content-preview {
    max-height: 300px;
  }
  
  .group-image-item {
    min-width: 100%;
  }
}

/* Beautiful hover effects for buttons */
.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced table styles */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.el-table .cell {
  padding: 12px 0;
}

/* Transitions for dialog */
.el-dialog {
  transition: all 0.3s ease;
}

.el-dialog__header {
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.el-dialog__footer {
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
}

/* Custom scrollbar */
.content-preview::-webkit-scrollbar {
  width: 6px;
}

.content-preview::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.content-preview::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}
</style>